<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>刘天平-登录页面</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			li {
				list-style-type: none;
			}
			
			.head {
				height: 100px;
				width: 1340px;
			}
				
			table {
				position: relative;
				left: 120px;
				top: 15px;
			}
			.main1 {margin-left: 106px;
				height: 588px;
				border: 1px solid;
				background: url(banner.jpg) no-repeat;
			}
			
			.main {width: 100%;
				background-color: #14212A
			}
			
			.div4 {
				height: 525px;
				width: 402px;
				background-color: white;
				margin-left: 770px;
				margin-top: 30px;
			}
		
			
			.div4 ul li {cursor: pointer;
				text-align: center;
				float: left;
				font-family: "微软雅黑";
				font-size: 26px;
			}
			.div4 ul li:hover{
				color:#F78217 ;
			}
			.block1{width: 400px;margin-top: 29px;display:block ;}
			.input{width: 360px;margin: 0 auto;}
			#name1,#password{height: 40px;margin-bottom: 15px;width: 338px;
			border: 1px solid;
			border-color: #E0E0E0;outline: none;}
			.input .denglu{width: 338px;margin: 0 auto;line-height: 51px;margin-top: 9px;border: none;outline: none;
			height: 51px;background-color: #F56600;color: white;font-size: 19px;}
		.block1	.input ul{width: 338px;margin-left: 90px;margin-top: 16px;  display: inline-block;}
		.block1	.input ul li a{text-decoration: none;color:#999999 ;font-size: 16px;}
		.block1	.input ul li{text-decoration: none;color:#999999 ;font-size: 16px;}
		.block1 .funshi{position: relative;right: 18px;}
		.block2{display: none;}
		.block3{display: none;}
		.block4{display: none;}
		.block5{display: none;}
			.foot {height: 150px;
				width: 1340px;
			}
		</style>
	</head>

	<body>
		<form onsubmit="return form()">
		<div>
			<div class="head">
				<table border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td rowspan="3"><img src="logo.png" align="absmiddle" /></td>
					</tr>
					<tr>
						<th style="font-size: 32px;font-family: arial;">小米商城</th>
					</tr>
					<tr>
						<td style="font-size: 11px;color: gray;">让每个人都能享受科技的乐趣</td>
					</tr>

				</table>
			</div>
			<div class="main">
				<div class="main1">
				<div class="div4" style="position: relative;">
					<ul>
						<li style="width: 190px;" onclick="show1()">账号登录
					<div class="block1" style="position: absolute;top:30px;">
					<div class="input">
						<input type="text" id="name1"style="color:#B0B0B0;font-family: '微软雅黑';" value="邮箱/手机号码/小米账号"  name="mike"/>	
					<input type="password" id="password" style="color:#B0B0B0;font-family: '微软雅黑';"  value="pass" name="mm"/>	
					<div class="block3"><img src="ed0b7aba9e134c49880a39b8321bc2f7.png"/></div>
					<div class="block4"><img src="df66c3b18d57d542b24bd597657d0ea6.png"/></div>
					<div class="block5"><img src="df66c3b18d57d542b24bd597657d0ea6.png"/></div>
					<input class="denglu"   type="submit" id="" name="" value="立即登录"/>
					<ul>
						<li><a href="#">注册小米账号</a>|</li>
						<li><a href="#">忘记密码？</a></li>
					</ul>
					<div class="funshi"><img src="b51828a727e9464ea02b85676ec62f2c.png"/></div>
					</div>
					</div>	
					<div class="block2" style="position: absolute;top: 30px;">
						<img src="8acdcfdd5ea6ee49b4f7415e34cdffa0.png"  />
					</div>
						</li>
						<li style="width: 20px;">|</li>
						<li style="width: 190px;" onclick="show2()">扫码登录
						
						</li>
					</ul>
				</div>
			</div>
			<div class="foot">
				<img src="5c6c68e5ae753fb90fde5500ff11a031.png" />
			</div>
		</div>
		</div>
		</form>
		<script type="text/javascript">
			function show1(){
				var block1=document.querySelector(".block1");
				var block2=document.querySelector(".block2");
				block1.style.display="block";
				block2.style.display="none";
			}
			function show2(){
				var block1=document.querySelector(".block1");
				var block2=document.querySelector(".block2");
				block1.style.display="none";
				block2.style.display="block";
			}
		var email=/^\w+[-+.]*\w+\@\w+\.\w+/	;
		var numer=/1[35789]\d{9}/;	
		var mm=/\w{4,16}/;	
		var name1=document.getElementById("name1");	
		var pass=document.getElementById("password");	
		var no=true;	
		var no1=true;
	    name1.onblur=function(){
			if (!((email.test(name1.value)||numer.test(name1.value)))&&name1.value!="") {
			no=false;
				var show1=pass.parentNode.children[3];
				show1.style.display="none";
			 var show=name1.parentNode.children[2];
			 show.style.display="block";
			}
			else{ var show=name1.parentNode.children[2];
			 show.style.display="none";}
			} 
			
			pass.onblur=function(){
			if(!(mm.test(pass.value))){
				no1=false;
				var show=name1.parentNode.children[2];
			 show.style.display="none";
				var show1=pass.parentNode.children[3];
				show1.style.display="block";
				console.log(show1);
			}
				else{
					var show1=pass.parentNode.children[3];
				show1.style.display="none";
				}
			};
			function form(){
				if (name1.value==""||pass.value=="") {
					return false;
				}else if((email.test(name1.value)||numer.test(name1.value))&&mm.test(pass.value)){
					return true;
				}
			}
		</script>
	</body>

</html>